<template>
  <el-dialog
    :title=" formData.id?'修改权限':'添加权限'"
    :visible="visibleDialog"
    @close="closeDialog"
  >
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="formData.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="标识">
        <el-input v-model="formData.code" placeholder="请输入标识" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="formData.description" placeholder="请输入描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submitFn">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addPermission, editPermissionById } from '@/api/permissions'
export default {
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入标识', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async submitFn() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        await editPermissionById(this.formData)
      } else {
        await addPermission(this.formData)
      }
      this.closeDialog()
      this.$message.success('操作成功！')
      this.$emit('updataFn')
    },
    closeDialog() {
      this.$emit('update:visibleDialog', false)
      this.formData = {
        title: '',
        code: '',
        description: '',
        pid: '',
        type: ''
      }
      this.$refs.form.resetFields()
    }

  }
}
</script>

<style>

</style>
